<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <label for="name">用户名</label>
      <input type="text" name="" id="name" v-model="name">
      <br>
      <label for="">性别</label>
      <input type="radio" name="sex" id=" " value="man" v-model="gender">男
      <input type="radio" name="sex" id=" " value="woman" v-model="gender">女
      <br>
      <label for="">爱好</label>
      <input type="checkbox" name="hobby" id="" value="game" v-model="hobby">游戏
      <input type="checkbox" name="hobby" id="" value="run" v-model="hobby">跑步
      <input type="checkbox" name="hobby" id="" value="sing" v-model="hobby">唱歌
      <br>
      <label for="">地区</label>
      <select name="" id="" v-model="origin">
        <option value="0">山西</option>
        <option value="1">河南</option>
        <option value="2">新疆</option>
        <option value="3">辽宁</option>
        <option value="4">江苏</option>
      </select>
      <br>
      <br>
      <br>
      <br>
      <label for="">留言</label>
      <textarea name="" id="" cols="20" rows="5" v-model="word"></textarea>
      <br>
      <button @click=add>提交</button>
    </div>
    <script src="./vue.js"></script>
    <script>
      const vm=new Vue({
        el:'#app',
        data:{name:"",gender:"",hobby:[],origin:"1",word:""},
        methods:{
          add(){
            console.log('提交数据为:',this.name,this.gender,this.hobby,this.origin,this.word);
        }},
       })
    </script>
  </body>
</html>